<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Map Application</title>
    <style>
        /*设置地图显示大小*/
        #mapDiv{
            width: 1100px;
            height: 800px;
            position: relative;
            float: left;
        }
    </style>
    </head>
    <body onLoad="onLoad()"> 
        <!--地图容器-->
        <div id="mapDiv"></div>
        <div>
            <span>操作</span><br/>
            <input type="button" onClick="drawMarker()" value="绘制点"/><br/>
            <input type="button" onClick="drawLine()" value="绘制线"/><br/>
            <input type="button" onClick="drawRectangle()" value="绘制矩形"/><br/>
            <input type="button" onClick="drawPolygon()" value="绘制多边形"/><br/>
            <input type="button" onClick="drawCircle()" value="绘制圆形"/><br/>
            <input type="button" onClick="drawRanging()" value="测距"/><br/>
            <input type="button" onClick="drawPolygonTool()" value="测面"/><br/>
            <input type="button" onClick="getDrawNumber()" value="获取图层个数"/><br/>
            <a href="Control.html">Control</a>
        </div>
    </body>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=c554936bfe9816d412f8cfb6b2adc767"></script>
    <script type="text/javascript">
        var map;
        var zoom = 12;
        function onLoad() {
            map = new T.Map('mapDiv');
            map.centerAndZoom(new T.LngLat(114.331232, 30.52545), zoom);
        }
        
        //绘制标注(点)
        function drawMarker(){
            var markerTool = new T.MarkTool(map, {follow: true});
            //map.clearOverLays();
            markerTool.open();
            //绑定mouseup事件 在用户每完成一次标注时触发事件。
            markerTool.addEventListener("mouseup",getPoints1);
        }
        
        function getPoints1(e){
            var points = e.currentLnglat;
            //标注点的坐标
            console.log(points);
        }
        
        //绘制线
        function drawLine(){
            var PolylineTool = new T.PolylineTool(map);
            //map.clearOverLays();
            PolylineTool.open();
            //绑定draw事件 用户每次完成拉框操作时触发事件。
            PolylineTool.addEventListener("draw",getPoints2);
        }
        
        function getPoints2(e){
            //用户当前绘制的折线的点坐标数组
            console.log(e.currentLnglats);
            console.log("用户当前绘制的折线的地理长度:"+e.currentDistance);
        }
        //绘制矩形
        function drawRectangle(){
            var rectTool = new T.RectangleTool(map);
            //map.clearOverLays();
            rectTool.open();
            
            //绑定draw事件 用户每次完成拉框操作时触发事件。
            rectTool.addEventListener("draw",getPoints3);
        }
        
        function getPoints3(e){
            var points = e.currentBounds;
            console.log(points);
        }
        
        //绘制多边形
        function drawPolygon(){
            var PolygonTool = new T.PolygonTool(map);
            //map.clearOverLays();
            PolygonTool.open();
            //绑定draw事件 用户双击完成一次折线绘制时触发事件。
            PolygonTool.addEventListener("draw",getPoints4);
        }
        
        function getPoints4(e){
            //用户当前绘制的多边形的点坐标数组
            console.log(e.currentLnglats);
            console.log("用户最后绘制的多边形的地理面积:"+e.currentArea);
        }
        
        //测距
        function drawRanging(){
            var config = {
                showLabel: true
            };
            lineTool = new T.PolylineTool(map, config);
            lineTool.open();
            
            //绑定addpoint事件 用户测距过程中，每次点击底图添加节点时触发事件。
            lineTool.addEventListener("addpoint",getAddpoint);
        }
        
        function getAddpoint(e){
            //用户当前绘制的折线的点坐标数组。
            console.log(e.currentLnglats);
            console.log("用户当前绘制的折线的地理长度:"+e.currentDistance);
        }
        
        //测面
        function drawPolygonTool(){
            var config = {
                showLabel: true,
                color: "cyan", weight: 3, opacity: 0.5, fillColor: "#FF00FF", fillOpacity: 0.3
            };
            //创建标注工具对象
            polygonTool = new T.PolygonTool(map, config);
            polygonTool.open();
            //绑定addpoint事件 用户测距过程中，每次点击底图添加节点时触发事件。
            polygonTool.addEventListener("draw",getDraw);
        }
        
        function getDraw(e){
            //最后绘制的多边形的顶点坐标数组
            console.log(e.currentLnglats);
            console.log("用户最后绘制的多边形的地理面积:"+e.currentArea);
        }
        
        //绘制圆形
        function drawCircle(){
            var config = {
                color: "blue",
                weight: 3,
                opacity: 0.5,
                fillColor: "#000000", 
                fillOpacity: 0.3
            };
            var circleTool = new T.CircleTool(map,config);
            circleTool.open();
             //绑定drawend事件 用户完成绘制圆时触发
            circleTool.addEventListener("drawend",getDrawend);
        }
        
        function getDrawend(e){
            //中心点坐标
            console.log(e.currentCenter);
            var radius = e.currentRadius;
            console.log("半径，单位为米:"+radius);
            console.log("面积，单位为平方米:"+Math.PI * radius*radius);
        }
        
        //获取图层个数
        function getDrawNumber(){
            var len = map.getOverlays().length;
            alert(len);
        }
        
    </script>
</html>